<template>
  <div class="equipment-operation chart-box1">
    <div class="chart-title">设备运行</div>
    <div class="chart-content">
      <div :id="chartId"></div>

      <div>
        <div class="text-number-1">
          <div>设备接入</div>
          <div class="number">
            <count-to
              :start-val="data.device_count.oldVal"
              :end-val="data.device_count.newVal"
              :duration="3000"
            />
          </div>
        </div>
        <div class="text-number-1">
          <div>设备离线</div>
          <div class="number">
            <count-to
              :start-val="data.offline_count.oldVal"
              :end-val="data.offline_count.newVal"
              :duration="3000"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
  onBeforeUnmount,
  nextTick,
  toRaw,
} from "vue";
import { Chart } from "@antv/g2";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "EquipmentOperation",
  components: { CountTo },
  setup(props) {
    const state = reactive({
      chart: null,
      chartId: "equipOptChart",
      data: {
        device_count: { ...common.countToInit },
        offline_count: { ...common.countToInit },
      },
    });

    const initChart = () => {
      const offline_count_ratio = state.data.device_count.newVal
        ? Math.ceil(
            (Number(state.data.offline_count.newVal) /
              Number(state.data.device_count.newVal)) *
              100
          )
        : 100;
      const data = [
        { type: "在线设备", value: 100 - offline_count_ratio },
        { type: "离线设备", value: offline_count_ratio },
      ];
      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
      });
      state.chart.data(data);
      state.chart.legend(false);
      state.chart.tooltip(false);
      state.chart.coordinate("theta", {
        radius: 1,
        innerRadius: 0.8,
      });
      state.chart
        .interval()
        .adjust("stack")
        .position("value")
        .color("type", ["#38b05c", "rgba(255,255,255,0.1)"]);

      state.chart.annotation().text({
        position: ["50%", "42%"],
        content: data[0].value + "%",
        style: {
          fontSize: 18,
          fill: "#fff",
          fontWeight: 500,
          textAlign: "center",
        },
        offsetY: 10,
      });

      state.chart.render();
    };

    watch(
      () => store.getters.synthetical.IotCountTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { IotCountTotal } = store.getters.synthetical;
      if (IotCountTotal) {
        for (let key in IotCountTotal) {
          let newItem = {
            oldVal: state.data[key]["newVal"],
            newVal: Number(IotCountTotal[key]),
          };
          state.data[key] = { ...newItem };
        }
        if (state.chart) {
          const offline_count_ratio = state.data.device_count.newVal
            ? Math.ceil(
                (Number(state.data.offline_count.newVal) /
                  Number(state.data.device_count.newVal)) *
                  100
              )
            : 100;
          const data = [
            { type: "在线设备", value: 100 - offline_count_ratio },
            { type: "离线设备", value: offline_count_ratio },
          ];
          state.chart.changeData(data);
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.equipment-operation {
  .chart-content {
    display: flex;
    align-items: center;
    #equipOptChart {
      width: 60%;
      height: 100%;
      position: relative;
    }
  }
}
</style>
